<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="item in swiperList" :key="item.id">
                <img :src="item.imgUrl"/>
            </swiper-slide>
            <!-- <swiper-slide>
                <img src="./../../../assets/1.jpg"/>
            </swiper-slide>
            <swiper-slide>
                <img src="./../../../assets/2.jpg"/>
            </swiper-slide>
            <swiper-slide>
                <img src="./../../../assets/3.jpg"/>
            </swiper-slide> -->

            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            
        </swiper>
    </div>
</template>

<script>
    export default {
        name:"HomeSwiper",
        data(){
            return{
               swiperOption:{
                   pagination:".swiper-pagination",    //显示轮播下边图标
                   loop:true     //实现循环轮播
               },
               swiperList:[
                 {
                     id:"001",
                     imgUrl:"/static/1.jpg"
                 },
                 {
                     id:"002",
                     imgUrl:"/static/2.jpg"
                 },
                 {
                     id:"003",
                     imgUrl:"/static/3.jpg"
                 }
               ] 
            }
        }
    }
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active{
    background #fff
}
.wrapper{
    width:100%;
    overflow :hidden;
    height:0px;
    padding-bottom:48%;
     img{
       width:100vw;
       height :180px
   }
}
  
</style>